<template>
  <div>
    <template v-for="(value, key, index) in myObjects" :key="index">
      <a :href="key" :title="index"> {{ value }}</a>
    </template>

    <p v-for="value in myObject" :key="'myObject' + value">
      {{ value }}
    </p>

    <ul>
      <template v-for="(obj, index) in myObjects" :key="'obj' + index">
        <li>
          {{ obj.title }}
          {{ obj.author }}
          {{ obj.publishedAt }}
        </li>
      </template>
    </ul>

    <ul>
      <li v-for="(obj, index) in myObjects" :key="'obj' + index">
        {{ obj.title }}
        {{ obj.author }}
        {{ obj.publishedAt }}
      </li>
    </ul>
    {{ checkedNames }}
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
    <label for="jack">Jack</label>

    <input type="checkbox" id="john" value="John" v-model="checkedNames" />
    <label for="john">John</label>

    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
    <label for="mike">Mike</label>

    <input id="logid" v-model="logid" />
    {{ logid }}
  </div>
</template>

<script setup>
import { ref } from 'vue'
const myObject = ref({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})

const myObjects = ref([
  {
    title: 'How to do lists in Vue',
    author: 'Jane Doe',
    publishedAt: '2016-04-10'
  },
  {
    title: 'How to do lists in Vue',
    author: 'Jane Doe',
    publishedAt: '2016-04-10'
  },
  {
    title: 'How to do lists in Vue',
    author: 'Jane Doe',
    publishedAt: '2016-04-10'
  }
])

const logid = ref('ttc')
const checkedNames = ref([])
</script>

<style lang="scss" scoped></style>
